<template>
    <div>
        <div class="hea">
            <i @click="goBack" class="el-icon-arrow-left"></i>
            <p>{{name}}</p>
        </div>
        <div class="main">
            <div class="top">
                <h2>{{detail.courseName}}</h2>
                <div class="tab">
                    <p>{{detail.courseType}}</p>
                    <p>{{detail.courseLevel}}</p>
                </div>
            </div>
            <div class="txt">
                <pre>{{detail.courseCatalogue}}</pre>
            </div>
            <div class="veo">
                <h2>视频课程</h2>
                <div class="veod">
                    <img src="../../assets/viedo.png" alt="">
                    <div class="de">
                        <h3>绩效考核（KPI+BSC）实战课程</h3>
                        <p>员工绩效管理运用事实评价还是运用感觉评价？</p>
                    </div>
                </div>
            </div>
            <div class="retit">
                <h2>推荐文章</h2>
                <Title :data="reList" />
            </div>
        </div>
    </div>
</template>

<script>
import {KuaixunDetail} from '@/api'
    export default {
        data() {
            return {
                name:"原创文章",
                reList:[],
                detail:{}
            };
        },
        created(){
            this.getDeta()
        },
        methods:{
            getDeta(){
            let id = Number(this.$route.query.newsId)
                KuaixunDetail(id).then(res => {
                    this.reList = res.data.data.articles
                    this.detail = res.data.data.course
                })
            },
            goBack() {
                this.$router.push('/home')
            }
        },
    }
</script>

<style scoped lang="scss">
    pre{
        line-height: 3vh;
    }
    .hea{
        display: flex;
        align-items: center;
        // background: chartreuse;
        padding: 1.3vh 0;
        >i{
            font-size: 6vw;
        }
        >p{
            font-size: 4.5vw;
            margin-left: 35vw;
        }
    }
    .main{
        background: rgba(248, 248, 248, 1);
        overflow: hidden;
        .top{
            padding: 2vh 0 0 5vw;
            border-bottom: 0.3vw solid #fff;
            h2{
                font-size: 5vw;
            }
            .tab{
                margin: 2vh 0;
                display: flex;
                p{
                    margin-right: 3vw;
                    font-size: 3vw;
                    color: #69DEC4;
                    background: rgba(231, 252, 247, 1);
                }
            }
        }
        .txt{
            border-bottom: 1vw solid #eee;
            padding: 4vw;
            font-size: 3.5vw;
        }
        .veo{
            padding: 4vw;
            border-bottom: 1vw solid #eee;
            h2{
                font-size: 4.2vw;
            }
            .veod{
                display: flex;
                margin-top: 6vw;
                padding: 4vw 0;
                background: rgba(242, 242, 242, 0.973);
                img{
                    margin: 0 5vw;
                    width: 15vw;
                }
                .de{
                    h3{
                        font-size: 4.3vw;
                    }
                    p{
                        margin-top: 0.2vh;
                        width: 55vw;
                        font-size: 3.5vw;
                        color: #999999;
                    }
                }
            }
        }
        .retit{
            padding: 4vw 4vw 0 6vw;
            h2{
                font-size: 4.2vw;
                margin-top: 2vh;
            }
        }
    }
</style>